<template>
	<view class="receive">
		<view class="search">
			<u-search placeholder="请输入您要搜索的内容" v-model="keywords" :showAction="false" bgColor="#f9f9f9"
				searchIconColor="#09092d" @search="getList" @clear="getList"></u-search>
		</view>
		<view class="container">
			<view class="board">
				<image class="board-bg" src="../../static/image/dataBg1.png" mode="aspectFill"></image>
				<view class="board-line">
					<view class="board-data">
						<view class="board-data-value symbol">￥{{extend.money_amount || 0}}</view>
						<view class="board-data-title">收礼总金额</view>
					</view>
					<view class="board-data">
						<view class="board-data-value">{{extend.all_count || 0}}</view>
						<view class="board-data-title">收礼总笔数</view>
					</view>
				</view>
			</view>
			<view class="main">
				<view class="tab">
					<view class="tab-title">收礼列表</view>
					<image class="add-icon" src="../../static/image/add.png" mode="aspectFit" @click="onPenEditModal()">
					</image>
				</view>
				<scroll-view class="scroll-view" scroll-y>
					<view class="list">
						<u-swipe-action>
							<u-swipe-action-item :options="options" v-for="item,index in list" :key="item.id"
								:name="item.id" @click="e => onActionItemClick(e, item, index)">
								<view class="list-item">
									<view class="list-item-line">
										<text class="date">{{item.date}}</text>
										<view class="label">我的人情簿</view>
									</view>
									<view class="list-item-line">
										<view class="line-left">
											<view class="icon">{{item.type_text}}</view>
											<text class="username">{{item.relatives_friends_name}}</text>
										</view>
										<view class="line-right">
											<text>￥{{item.money}}</text>
										</view>
									</view>
									<view class="list-item-line">
										<text class="address">{{item.address}}</text>
										<!-- <image class="sign" src="../../static/image/empty1.png" mode="aspectFill"></image> -->
										<u-button v-if="!item.is_return" color="#f05948" size="small" text="标记回礼"
											:customStyle="{width:'140rpx',margin: 0}" @click="onSign(item)"></u-button>
										<u-button v-else color="rgb(10, 185, 156)" size="small" plain text="已回礼"
											:customStyle="{width:'140rpx',margin: 0, opacity: 1}" disabled></u-button>
									</view>
								</view>
							</u-swipe-action-item>
						</u-swipe-action>
					</view>
					<m-empty v-if="!list.length" image="../../static/image/empty1.png" title="暂无收礼记录"
						tip="快去添加您的第一个收礼吧~" btnText="添加收礼" @btnClick="onPenEditModal()"></m-empty>
				</scroll-view>
			</view>
		</view>
		<u-popup :show="show" :round="20" closeable @close="show = false" mode="bottom">
			<view class="wrapPopup">
				<view class="pop-title">{{formData.id ? '编辑' : '新增'}}收礼</view>
				<u--form :model="formData" :rules="rules" ref="uForm" labelWidth="200rpx">
					<u-form-item label="姓名" prop="relatives_friends_name" borderBottom required>
						<u--input v-model="formData.relatives_friends_name" placeholder="请输入姓名" clearable></u--input>
					</u-form-item>
					<u-form-item label="金额" prop="money" borderBottom required>
						<u--input v-model="formData.money" placeholder="请输入金额" type="digit" clearable></u--input>
					</u-form-item>
					<!-- <u-form-item label="礼品" prop="gift" borderBottom>
						<u--input v-model="formData.gift" placeholder="请输入礼品" clearable></u--input>
					</u-form-item>
					<u-form-item label="时间" prop="date" borderBottom>
						<picker mode="date" :value="formData.date" @change="bindDateChange">
							<u--input v-model="formData.date" placeholder="请选择时间" suffixIcon="calendar-fill"
								suffixIconStyle="fontSize:50rpx" :customStyle="{background:'#fff'}" disabled></u--input>
						</picker>
					</u-form-item> -->
					<u-form-item label="地址" prop="address" borderBottom>
						<u--input v-model="formData.address" placeholder="请输入地址" clearable></u--input>
					</u-form-item>
					<u-form-item label="备注" prop="remark" borderBottom labelPosition="top">
						<u--textarea v-model="formData.remark" placeholder="请输入备注(120字以内)" count maxlength="120"
							clearable></u--textarea>
					</u-form-item>
				</u--form>
				<view class="btn" @click="submit">提交</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		get,
		post
	} from '../../static/utils/request'
	import {
		Receive,
		Send
	} from '../../static/utils/service'
	import {
		Toast
	} from '../../static/utils/utils'
	export default {
		data() {
			const time = new Date()
			const startDate = `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()}`
			return {
				startDate,
				options: [{
					text: '编辑',
					style: {
						backgroundColor: '#00aaff'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#FF3141'
					}
				}],
				bookId: '',
				keywords: '',
				extend: {},
				list: [],
				show: false,
				formData: {
					relatives_friends_name: '',
					money: '',
					// gift: '',
					// date: startDate,
					address: '',
					remark: '',
				},
				rules: {
					'relatives_friends_name': {
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					},
					'money': [{
							required: true,
							message: '请输入金额',
							trigger: ['blur', 'change']
						},
						{
							type: 'number',
							message: '必须为数字'
						}
					]
				},
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(e) {
			this.bookId = e.bookId
			this.formDataOrg = {
				...this.formData
			}
			this.getList()
		},
		methods: {
			async getList() {
				const {
					code,
					data,
					msg
				} = await get(Receive.lists, {
					gift_book_category_id: this.bookId,
					keywords: this.keywords,
					type: 1, //类型:1-收礼;2-送礼
				}, '加载中')
				if (code == 1) {
					this.extend = data.extend
					this.list = data.lists
				} else Toast.none(msg)
			},
			//获取举办日期
			bindDateChange(e) {
				this.formData.date = e.detail.value
			},
			submit() {
				this.$refs.uForm.validate().then(async () => {
					const params = {
						...this.formData,
						gift_book_category_id: this.bookId
					}
					const api = params.id ? Receive.edit : Receive.add
					const {
						code,
						msg
					} = await post(api, params, '提交中')
					if (code == 1) {
						this.onCloseEditModal()
						this.onClearFormData()
						this.getList()
					} else Toast.none(msg)
				}).catch(err => {
					Toast.error('请完善信息')
				})
			},
			//标记回礼
			onSign(e) {
				uni.showModal({
					title: '确认标记',
					content: '是否确认标记回礼?',
					success: async r => {
						if (r.confirm) {
							const {
								code,
								msg
							} = await post(Send.sign, {
								id: e.id,
								is_return: 1
							})
							if (code == 1) {
								e.is_return = 1
							} else {
								Toast.none(msg)
							}
						}
					}
				})
			},
			onActionItemClick(e, record, i) {
				const {
					index,
					name
				} = e
				if (index == 0) {
					this.onPenEditModal(record)
				}
				if (index == 1) {
					this.onDel(name, i)
				}
			},
			onDel(id, i) {
				wx.showModal({
					title: '删除提示',
					content: '是否确认删除？',
					success: async res => {
						if (res.confirm) {
							const {
								code,
								msg
							} = await post(Receive.delete, {
								id
							}, '提交中')
							if (code == 1) {
								this.getList()
							} else {
								Toast.none(msg)
							}
						}
					}
				})
			},
			onClearFormData() {
				this.formData = {
					...this.formDataOrg
				}
				this.$refs.uForm.resetFields()
			},
			onPenEditModal(e) {
				this.formData = {
					...e ? e : this.formDataOrg
				}
				this.show = true
			},
			onCloseEditModal() {
				this.show = false
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f8f8f8;
	}

	.receive {
		height: 100%;
		display: flex;
		flex-direction: column;

		.search {
			padding: 30rpx;
			background-color: #fff;
		}

		.container {
			flex: 1;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			overflow: hidden;

			.board {
				padding: 40rpx 0 0 80rpx;
				position: relative;
				height: 196rpx;

				.board-bg {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					z-index: -1;
				}

				.board-line {
					display: flex;

					.board-data {
						flex: 1;

						.board-data-value {
							color: #fff;
							font-size: 40rpx;
						}

						.symbol {
							transform: translateX(-.2em);
						}

						.board-data-title {
							margin-top: 20rpx;
							color: #fbbfb7;
							font-size: 24rpx;
						}
					}
				}
			}

			.main {
				margin-top: 20rpx;
				flex: 1;
				background-color: #fff;
				border-radius: 20rpx;
				overflow: hidden;
				display: flex;
				flex-direction: column;

				.tab {
					padding: 25rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.add-icon {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.scroll-view {
					flex: 1;
					overflow: hidden;
					background-color: #fff;

					.list {
						padding: 25rpx;

						.list-item {
							padding: 25rpx 0;
							border-bottom: 1rpx solid #efefef;

							.list-item-line {
								display: flex;
								align-items: center;
								justify-content: space-between;

								&:nth-child(2) {
									margin-top: 20rpx;
								}

								.date {
									color: #aaa;
									font-size: 28rpx;
								}

								.label {
									padding: 6rpx 14rpx;
									background-color: #fdf4f5;
									border-radius: 8rpx;
									color: #f05948;
									font-size: 24rpx;
								}

								.line-left {
									display: flex;
									align-items: center;

									.icon {
										margin-right: 20rpx;
										width: 80rpx;
										height: 80rpx;
										border-radius: 15rpx;
										background-color: #f05948;
										text-align: center;
										line-height: 80rpx;
										color: #fff;
									}

									.username {
										font-size: 28rpx;
									}
								}

								.address {
									color: #aaa;
									font-size: 30rpx;
								}

								.sign {
									width: 80rpx;
									height: 80rpx;
								}
							}
						}

					}
				}

			}
		}

		/deep/.u-popup {
			flex: inherit !important;
		}

		.wrapPopup {
			padding: 0 40rpx 80rpx;

			.pop-title {
				padding: 50rpx 0 25rpx;
				text-align: center;
			}

			.btn {
				margin-top: 50rpx;
				height: 80rpx;
				border-radius: 80rpx;
				background-color: #f05948;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
			}
		}
	}
</style>